<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			姓名：{{people.name}}
			年龄：{{people.age}}
			身高：{{people.h}}
			体重：{{people.w}}
			<hr>
			<img width="200" src="img/t01.jpg" alt="">
			<br>
			<!-- 绑定属性 -->
			<img width="200" v-bind:src="url" alt="">
			<br>
			<img :width="width" :src="url" alt="">
			<br>
			<!-- width=width+10 -->
			<button v-on:click='width+=10'>+10</button>
			<button @click="width-=10">-10</button>
			<hr>
			<button @click="width*=1.1">放大10%</button>
			<button @click="width*=0.9">缩小10%</button>
			<hr>
			<div v-if='a%2!=0'>
				a是奇数
			</div>
			<div v-else>
				a是偶数
			</div>
			<hr>
			<p>
				<!-- 张三
				<span v-if='people.age>=18'>是</span>
				<span v-else>不是</span>
				成年人 -->
				
				张三 {{people.age>=18?"是":"不是"}} 成年人
			</p>
			<!-- 三元运算符 -->
			<!-- 条件?结果:结果2 -->
			<p>
				{{a}}是 {{ a%2==0?"偶数":"奇数" }}
			</p>
		</div>
		<!-- 200*1.1  =220 -->
		<script>
			const app = Vue.createApp({
				data() { //静态数据
					return {
						people: {
							name: '张三',
							age: 18,
							h: 165,
							w: 65,
						},
						url: 'img/t03.jpg',
						width: 200,
						a: 9
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>